<template>
  <div class="container-fluid">
    <div class="row mb-3 no-gutters" v-loading="loading">
      <div class="col-sm" v-for="(item, index) in list" :key="index">
        <div class="card" :class="{ 'mr-3': index !== list.length - 1 }">
          <div class="card-body">
            <div class="panel-wrap">
              <span class="panel-icon" :class="`text-${item.color}`">
                <i class="fa" :class="item.icon"></i>
              </span>
              <div class="panel-content">
                <div class="panel-num">{{ item.num }}</div>
                <div class="text-muted">{{ item.name }}</div>
              </div>
            </div>
            <hr />
            <div class="row" v-if="item.child">
              <div
                class="text-truncate"
                v-for="(child, i) in item.child"
                :key="i"
                :class="[
                  `col-${getCol(item.child)}`,
                  child.onClick ? 'text-primary cursor-pointer' : 'text-muted',
                ]"
                @click="() => child.onClick && child.onClick()"
                style="font-size: 0.8rem"
              >
                <span>{{ child.name }}</span>
                <span>{{ child.num }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <credit-agency-dialog :visible.sync="creditAgencyVisible"></credit-agency-dialog>
      <bank-agency-dialog :visible.sync="bankAgencyVisible"></bank-agency-dialog>
    </div>
  </div>
</template>
<script>
import CreditAgencyDialog from '@/gov/views/index/CreditAgencyDialog'
import BankAgencyDialog from '@/gov/views/index/BankAgencyDialog'

export default {
  components: {
    CreditAgencyDialog,
    BankAgencyDialog,
  },
  props: {},
  data() {
    return {
      list: [
        {
          name: '经营主体数',
          num: 0,
          icon: 'fa-users',
          color: 'primary',
          child: [
            { name: '建档数：', num: 0 },
            { name: '已推荐：', num: 0 },
            { name: '放款：', num: 0 },
            { name: '解保：', num: 0 },
          ],
        },
        {
          name: '累积放款（万元）',
          num: 0,
          icon: 'fa-cny',
          color: 'danger',
          child: [
            { name: '在保金额：', num: 0 },
            { name: '解保金额：', num: 0 },
          ],
        },
        {
          name: '机构信息',
          num: 0,
          icon: 'fa-address-card-o',
          color: 'danger',
          child: [
            { name: '担保机构：', num: 0, onClick: this.openCreditAgency },
            { name: '银行机构：', num: 0, onClick: this.openBankAgency },
          ],
        },
      ],
      loading: false,
      serviceId: '',

      creditAgencyVisible: false,
      bankAgencyVisible: false,
    }
  },
  computed: {
    userId() {
      return this.$store.getters.user.userId
    },
    clientId() {
      return this.$store.getters.org.clientId
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getCol(child) {
      const len = child ? child.length : 1
      return len > 4 ? 3 : 12 / len
    },
    async getData() {
      this.serviceId = this.$store.getters.org.clientId
      this.loading = true
      let [project] = await this.$utils.promise(
        this.$api.getData('credit', 'credit_project_total_gov_view_new', {
          'user_id.eq': this.userId,
        })
      )
      this.loading = false
      if (!project) {
        return this.$message.error('获取统计信息失败！')
      }

      const data = (project.data && project.data.length && project.data[0]) || {}

      this.list[0].num = data.project_total || 0 // 经营主体数
      this.list[0].child[0].num = data.archives_total || 0 // 建档数
      this.list[0].child[1].num = data.yes_recommend || 0 // 已推荐
      this.list[0].child[2].num = data.reply_total || 0 // 放款
      this.list[0].child[3].num = data.un_gua_total || 0 // 解保

      this.list[1].num = data.reply_funds || 0 // 累积放款
      this.list[1].child[0].num = data.gua_funds || 0 // 在保金额
      this.list[1].child[1].num = data.un_gua_funds || 0 // 解保金额

      this.list[2].child[0].num = +data.credit_agency_total || 0 // 担保机构
      this.list[2].child[1].num = +data.bank_total || 0 // 银行机构
      this.list[2].num = this.list[2].child[0].num + this.list[2].child[1].num // 合作机构
    },
    openCreditAgency() {
      this.creditAgencyVisible = true
    },
    openBankAgency() {
      this.bankAgencyVisible = true
    },
  },
}
</script>
<style scoped lang="scss">
.panel-wrap {
  display: flex;
  line-height: 1;
  align-items: center;
  margin-bottom: 1rem;

  .panel-icon {
    font-size: 36px;
    margin-right: 1rem;
    width: 40px;
    text-align: center;
  }

  .panel-content {
    font-size: 16px;
  }

  .panel-num {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0.25rem;
  }
}
</style>
